<template>
  <Tabs
    ref="tabs"
    @tabSelect="tabSelect"
    class="publicTabs"
    headerHeight="30px"
    :plain="true"
    style="width: 100%; height: 100%;"
  >
    <TabPanel :title="'岗位列表'" :key="1" v-if="userIds==null">
      <div
        style="overflow: hidden;position: absolute;height: 100%;width: 100%;"
      >
        <job-tree
          ref="jobTree"
          :treeId="jobTree"
          :onZTreeClick="onZTreeClick"
          :onZTreeCheck="onZTreeCheck"
          :treeHeight="treeHeight"
          :dataUrl="deptUrl"
          :enable="enable"
        />
      </div>
    </TabPanel>
    <!-- <TabPanel :title="'人员列表'" :key="2" v-if="showUserList"> -->
    <TabPanel :title="'人员列表'" :key="2" v-if="showUserList">
      <div style="position: absolute;top:6px;left: 10px;right: 10px;">
        <!-- <input
          type="text"
          :id="jobTree + '_user_search'"
          style="width:100%;"
          placeholder="请输入工号或姓名名称"
        /> -->
        <SearchBox
          :id="jobTree + '_user_search'"
          style="width:100%;"
          placeholder="请输入工号或姓名"
          v-model="userSearchValue"
          @search="searchEmp($event)"
        >
          <Addon>
            <span
              v-if="userSearchValue"
              class="textbox-icon icon-clear"
              title="Clear value"
              @click="userSearchValue = null"
            ></span>
          </Addon>
        </SearchBox>
      </div>
      <div style="position: absolute;top:36px;left: 0px;right: 0px;bottom:0">
        <bd-grid
          style="width: 100%;height: 100%"
          ref="gridEmpList"
          :classId="1"
          :dataUrl="userDataUrl"
          :httpMethod="'POST'"
        ></bd-grid>
      </div>
    </TabPanel>
  </Tabs>
</template>

<script>
import jobTree from "@/components/job/jobTree";
import BdGrid from "@/components/gridNoPage";

export default {
  components: {
    jobTree,
    BdGrid
  },
  props: {
    enable: {
      type: Boolean,
      default: true
    },
    onZTreeClick: Function,
    onZTreeCheck: Function,
    treeHeight: String,
    treeId: String,
    showUserList: {
      //如果该复选框是true 说明需要去选中员工，如果是false 那么直接单选 而且不需要员工列表面板
      type: Boolean,
      default: true
    },
    deptUrl: String,
    // 初始化查询人员编号
    userIds: String,
    num: Number,
    userDataUrl: {
      type: String,
      default: "api/user/list/agList"
    }
  },
  data() {
    return {
      //1:部门 2：人员
      selectTab: 1,
      jobTree: "jobTree",
      userSearchValue: "",
      defaultColDef: {
        resizable: true //列宽拖动
      }
    };
  },
  beforeMount() {
    // console.log("treeid----" + this.treeId);
    this.jobTree = this.treeId;

  },
  mounted(){
    if(this.userIds!=null && this.userIds!=''){
        this.selectTab = 2;
        this.$refs.tabs.select(1);
        this.$refs.gridEmpList.loadData({
          userIds: this.userIds,
          deptSerial: ''
        });
    }
  },
  methods: {
    //切换tab面板
    tabSelect(tab) {
      if (tab.title == "人员列表") {
        this.selectTab = 2;
        this.$refs.gridEmpList.loadData({
          deptSerial: this.getSelectDeptIds()
        });
      } else {
        this.selectTab = 1;
        this.userSearchValue = ""
      }
      // console.log(this.$refs.gridEmpList);
      // this.$refs.gridEmpList.resetColumn(7);
    },
    // 查询tab2表格
    searchBtn(){
      this.searchNodes(this.treeSearchValue);
    },
    getSelectDeptIds() {
      return this.$refs.jobTree.getCheckedNodeIdString();
    },
    getSelectUserIds() {
      if (this.showUserList) {
        return this.$refs.gridEmpList.getCheckedIds();
      } else {
        return "";
      }
    },
    getSelectDept() {
      return this.$refs.jobTree.getSelectedNodes();
    },
    getSelectUsers() {
      return this.$refs.gridEmpList.getCheckeds();
    },
    getUserData() {
      return this.$refs.gridEmpList.rowData;
    },
    selectAll() {
      this.$refs.gridEmpList.selectAll();
    },
    setTabs(index) {
      this.$refs.tabs.select(index);
    },
    /**
     * 员工列表查询
     */
    searchEmp() {
      this.$refs.gridEmpList.filterData(this.userSearchValue);
      if (this.userSearchValue != "") {
        this.$refs.gridEmpList.deselectAll();  //取消全选
      }
    },
    reloadTreeData() {
      this.$refs.jobTree.loadData();
    }
  }
};
</script>
